<template>
  <!-- 新碟上架 -->
  <div class="new_disc" v-if="discList.length !== 0">
    <div class="swiper-container">
      <swiper :navigation="swiperOptions.navigation">
        <swiper-slide v-for="item in discList" :key="item.key">
          <div class="disc_box">
            <div
              class="item"
              v-for="data in item.value"
              :key="data.id"
              @click="newDiscItemClick(data)"
            >
              <div class="pic_box">
                <img v-lazy="data.picUrl" alt="" class="pic" />
              </div>
              <div class="music_name">{{ data.name }}</div>
              <div class="singer">{{ getAllSingers(data.artists) }}</div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import SwiperCore, { Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";

import "swiper/swiper.min.css"; // 整个轮播图的样式
import "swiper/components/navigation/navigation.min.css"; // 左右按钮的样式

SwiperCore.use([Navigation]);
export default defineComponent({
  name: "NewDisc",
  components: {
    Swiper,
    SwiperSlide,
  },
  props: {
    discList: {
      type: Array,
      default: () => {
        return [];
      },
      require: true,
    },
  },
  setup(props, context) {
    let data = reactive({
      swiperOptions: {
        navigation: {
          nextElRef: ".swiper-button-next",
          prevElRef: ".swiper-button-prev",
        },
      },
    });

    // 整理所有的歌手
    let getAllSingers = (artists) => {
      return artists.map((item) => item.name).join("/");
    };

    let newDiscItemClick = (item) => {
      context.emit("newDiscItemClick", item)
    }

    return {
      ...toRefs(data),
      getAllSingers,
      newDiscItemClick
    };
  },
});
</script>
<style scoped>
.new_disc {
  width: 100%;
}

.swiper-container,
.swiper-wrapper,
.swiper-slide,
.disc_box {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
.swiper-container >>> .swiper-button-prev,
.swiper-container >>> .swiper-button-next {
  color: #c20c0c;
}

.item {
  width: 20%;
}

.pic_box {
  width: 100px;
  height: 100px;
  margin: 0 auto;
}
.pic {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid #eee;
}

.music_name,
.singer {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  color: #222;
  font-size: 13px;

  margin: 5px 0;
  text-align: center;
  cursor: pointer;
}
.singer {
  color: #888;
}
.singer:hover,
.music_name:hover {
  text-decoration: underline;
}
</style>
